<template>

  <a-row type="flex" class="row-bg mainbox" justify="space-between" style="margin-left: 20px">
    <!--    第一列-->
    <a-col :xs="24" :sm="24" :md="7" :lg="7" class="chartCol" style="margin-top: 20px; margin-left: 20px">
      <a-row :xs="24" :sm="24" :md="7" :lg="7" class="row_style">
        <a-card class="update-log panel bar">
          <div class="body">
            <div id="predictSchool" class="collegeRegistration" style="width:380px; height: 320px"></div>
            <div class="panel-footer"></div>
          </div>
        </a-card>
      </a-row>

      <a-row :xs="24" :sm="24" :md="7" :lg="7" class="row_style" style="margin-top: -15px">
        <a-card class="update-log panel pie">
          <div class="body">
            <div id="predictContest" class="honor-contest" style="width:380px; height: 320px"></div>
            <div class="panel-footer"></div>
          </div>
        </a-card>
      </a-row>
    </a-col>
    <!--    第二列，地图-->
    <a-col :xs="24" :sm="24" :md="16" :lg="16" class="chartCol" style="margin-right: 20px;">
      <!--柱状图-->
      <div style="margin-bottom: 40px; margin-top: 40px">
        <a-row style="display: flex; justify-content: center;">
          <div style="color: #fff; margin-block: 10px; font-size: 60px">我的钱哪儿去了？</div>
        </a-row>
        <a-row style="display: flex; justify-content: center; margin-top: 10px">
          <div class="panel" style="max-width: 300px; margin-right: 10px;">
            <div
                style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 220px; height: 50px;">
              总消费<span style="margin-left: 5px; color: red;font-size:50px">15604</span>元
            </div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel" style="max-width: 300px; margin-right: 10px">
            <div
                style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 220px; height: 50px;">
              年消费<span style="margin-left: 5px; color: red;font-size:50px">6250</span>元
            </div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel" style="max-width: 300px; margin-right: 10px">
            <div
                style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 220px; height: 50px;">
              月消费<span style="margin-left: 5px; color: red;font-size:50px">1383</span>元
            </div>
            <div class="panel-footer"></div>
          </div>
        </a-row>
        <!-- <a-row style="display: flex; justify-content: center;">
          <div class="panel" style="max-width: 150px; margin-right: 10px;">
            <div style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">省赛一等奖<span style="margin-left: 5px; color: red;">34</span></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel" style="max-width: 150px; margin-right: 10px">
            <div style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">省赛二等奖<span style="margin-left: 5px; color: red;">59</span></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel" style="max-width: 150px;">
            <div style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">省赛三等奖<span style="margin-left: 5px; color: red;">111</span></div>
            <div class="panel-footer"></div>
          </div>
        </a-row> -->
      </div>
      <a-col :xs="24" :sm="24" :md="10" :lg="10" class="chartCol" >
        <a-row style="width: 420px">
          <a-card class="update-log map">
            <div class="body" style="width: 380px">
              <div id="predictMap" ref="echart_china" class="echart_china" style="width:380px; height: 320px">
              </div>
              <div class="map-footer"></div>
            </div>
          </a-card>
        </a-row>
      </a-col>
      <a-col :xs="24" :sm="24" :md="13" :lg="13" class="chartCol" style="">
        <a-row style="width: 600px">
          <a-card class="update-log panel line">
            <div class="body" style="width: 600px">
              <div id="predictLqb" class="rose-contest" style="width:600px; height: 320px" ></div>
              <div class="panel-footer"></div>
            </div>
          </a-card>
        </a-row>
      </a-col>
    </a-col>
  </a-row>

</template>
<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  name: 'predict',
  props: {
    deliver: Boolean
  },
  data() {
    return {
      options: [],
      value: '大连民族大学',
      optionsContest: [],
      valueContest: '互联网+',
      optionsTrack: [],
      valueTrack: 'C/C++程序设计'
    }
  },
  mounted() {
    this.initPredictOne();
    this.initPredictTwo();
    this.initCiyun();
    this.initPredictThree();
  },
  methods: {
    initPredictOne() {
      setTimeout(() => {
        this.initPredictSchool();
      }, 100);
    },
    initPredictSchool() {
      console.log("执行第一个图表");
      // 确保图表容器存在
      var container = document.getElementById('predictSchool');
      if (!container) {
        console.error('图表容器未找到');
        return;
      }
      // 移除_echarts_instance_属性以重新初始化图表
      if (container._echarts_instance_) {
        container._echarts_instance_.dispose();
        console.log("移除")
      }
      // 初始化 ECharts 图表实例
      var chartContainerOne = echarts.init(container);
      // 定义图表配置项
      const option = {
        title: {
          text: '2024年每月消费情况',
          textStyle: {
            color: '#fff'
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLabel: {
            color: '#fff',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        toolbox: {
          feature: {
            restore: {show: true}, // 还原
            saveAsImage: {show: true}, // 保存为图片
          }
        },
        grid: {
          // left: '12%', // 图表内容距离容器左侧的边距
          // right: '0%', // 图表内容距离容器右侧的边距
          // top: '10%', // 图表内容距离容器顶部的边距
          // bottom: '15%', // 图表内容距离容器底部的边距
          width: '95%',
        },
        series: [{
          data: [900, 1230, 980, 1539, 2380, 1298],
          type: 'line',
          smooth: true,
        }],
      };
      // 使用配置项和数据显示图表
      chartContainerOne.setOption(option);
      // 监听窗口大小变化以调整图表大小
      window.addEventListener("resize", () => {
        chartContainerOne.resize();
      });
      // 可选：在组件销毁时移除事件监听器和销毁图表实例
      // 例如，在Vue组件的beforeDestroy钩子中添加以下代码：
      // this.$once('hook:beforeDestroy', () => {
      //     window.removeEventListener("resize", resizeHandler);
      //     chartContainerOne.dispose();
      // });
    },

    initPredictTwo() {
      setTimeout(() => {
        this.initPredictContest();
      }, 100);
    }
    ,
    initPredictContest() {

      const option = {
        title: {
          text: '各服务类型占比',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: '上门维修'
              },
              {
                value: 234,
                name: '保姆'
              },
              {
                value: 748,
                name: '卫生清洁'
              },
              {
                value: 500,
                name: '做饭'
              },
              {
                value: 200,
                name: '家庭护理'
              },
              {
                value: 300,
                name: '宠物照料托管'
              }
            ]
          }
        ]
      };
      document.getElementById('predictContest').removeAttribute('_echarts_instance_');
      document.getElementById('predictContest').removeAttribute('_echarts_instance_');
      var chartContainerTwo = echarts.init(document.getElementById('predictContest'));
      chartContainerTwo.setOption(option);
    }
    ,
    initCiyun() {

      const echartDom = document.getElementById('predictMap')
      const myChart = echarts.init(echartDom)
      const option = {
        title: {
          text: "小贴士词云图",
          textStyle: {
            color: '#fff',
          }
        },
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          keepAspect: false,
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          width: '100%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 8,
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            // focus: 'self',
            textStyle: {
              textShadowBlur: 3,
              textShadowColor: '#333'
            }
          },
          //data属性中的value值却大，权重就却大，展示字体就却大
          data: [

            {name: "保姆", value: 606},
            {name: "打扫卫生", value: 606},
            {name: "擦玻璃", value: 606},
            {"name": "擦玻璃", "value": 606},
            {"name": "做饭", "value": 589},
            {"name": "洗衣", "value": 572},
            {"name": "照顾孩子", "value": 537},
            {"name": "照顾老人", "value": 521},
            {"name": "园艺", "value": 498},
            {"name": "修理家电", "value": 475}
          ],
        }]

      }
      option && myChart.setOption(option)

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });

    }
    ,
    initPredictThree() {
      setTimeout(() => {
        this.initPredictLqbTrack();
      }, 100);
    }
    ,
    initPredictLqbTrack() {
      var chartContainerTwo = echarts.init(document.getElementById('predictLqb'));
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '各年份消费服务服务类型分布',
          textStyle: {
            color: '#fff',
          }
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['2020', '2021', '2022', '2023', '2024']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          // {
          //   // barWidth: '60%',
          //   barMaxWidth: 50
          // },

          {
            name: '卫生清洁',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            barMaxWidth: 35,
            data: [320, 870, 750, 1120, 1250]
          },
          {
            name: '宠物照料托管',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            barMaxWidth: 35,
            data: [0, 282, 560, 450, 862 ]
          },
          {
            name: '上门维修',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            barMaxWidth: 35,
            data: [220, 430, 201, 420, 623]
          },
          {
            name: '上门做饭',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            barMaxWidth: 35,
            data: [120,1320,1100,1540,1900]
          },
          {
            name: '保姆',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'right'
            },
            barMaxWidth: 35,
            data: [850,720,1408,1280,1700]
          }
        ]
      };
      chartContainerTwo.setOption(option);
    }
  }
}

</script>
<style lang="scss">
.text-right {
  text-align: right;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 10px;
    }
  }
}

//对快捷菜单的css样式
.a-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.a-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

//菜单图片的css
.menu-img {
  width: 80%;
  height: 80%;

}

//最上面三个标题图片的css
.title-img {
  width: 18px;
  height: 18px;
}

//学院报名情况
.collegeRegistration, .honor-contest, .rose-contest {
  width: 100%; /* 图表宽度占满容器 */
  height: auto; /* 高度自适应 */
}


.yuntu, .collegeReward, .rose-contestHonor {
  height: 230px;
}

.echart_china {
  width: 100%; /* 图表宽度占满容器 */
  height: auto; /* 高度自适应 */
}

//可视化界面的三列
//.chartCol {
//  height:100vh;
//}
//最上面三个统计
.title-s {
  font-size: 20px;
}

//统计里的数字
.title-2 {
  font-size: 20px;
}

//第一列的三个图表间隔
//.row_style {
//  margin-top: 1rem;
//  margin-bottom: 1rem;
//}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  position: relative; /* 确保.body是相对定位，这样绝对定位的子元素会相对于它定位 */
  width: 100%; /* 或者设置一个固定的宽度 */
  height: auto; /* 根据内容自动调整高度 */
  padding: 0; /* 移除内边距 */
  margin: 0 auto; /* 居中显示，如果需要的话 */
  font-family: Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  background-color: #06164A;
  //background-size: cover;
  /* 行高是字体1.15倍 */
  //line-height: 1.15;
}


/*header {*/
/*    position: relative;*/
/*    height: 1.25rem;*/
/*    background: url(../img/head_bg.png) no-repeat top center;*/
/*    background-size: 100% 100%;*/
/*}*/

/*header h1 {*/
/*    font-size: 0.475rem;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    line-height: 1rem;*/
/*}*/

/*header .showTime {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0.375rem;*/
/*    line-height: 0.9375rem;*/
/*    font-size: 0.25rem;*/
/*    color: rgba(255, 255, 255, 0.7);*/
/*}*/

.mainbox {
  min-width: 1024px;
  max-width: 1920px;
  min-height: 800px;
  //padding: 0.125rem 0.125rem 0;
  display: flex;
  background: #06164A;
}

.mainbox .column {
  flex: 3;
}

.mainbox .column:nth-child(2) {
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}

.panel {
  position: relative;
  //height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04);
  padding-left: 5px;
  padding-right: 5px;
  //margin-bottom: 0.1875rem;
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.map::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.map::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.map .map-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.map .map-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  font-size: 0.25rem;
  font-weight: 400;
}

.panel h2 a {
  margin: 0 0.1875rem;
  color: #fff;
  text-decoration: underline;
}

.panel .chart {
  //height: 3rem;
}

.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}

.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}

.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}

.no .no-hd ul {
  display: flex;
}

.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
}

.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.no .no-bd ul {
  display: flex;
}

.no .no-bd ul li {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.225rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}

.map {
  position: relative;
  //height: 10.125rem;
  background-color: #06164A;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  //height: 10.125rem;
  width: 100%;
}

.map .map1,
.map .map2,
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.475rem;
  height: 6.475rem;
  background: url(/src/assets/images/map.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
}

.map .map2 {
  width: 8.0375rem;
  height: 8.0375rem;
  background-image: url(/src/assets/images/lbx.png);
  opacity: 0.6;
  animation: rotate 15s linear infinite;
  z-index: 2;
}

.map .map3 {
  width: 7.075rem;
  height: 7.075rem;
  background-image: url(/src/assets/images/jt.png);
  animation: rotate1 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

</style>
